<template>
  <div id="page">
    <!-- 顶部 -->
    <div id="header_top">
      <p class="iconfont">&#xe6bc;</p>
      <p>登录</p>
      <p>
        <span class="iconfont">&#xf0112; </span>
        <span class="iconfont">&#xe71e;</span>
        <i></i>
      </p>
    </div>

    <!-- 内容 -->
    <main>
      <div id="content">
        <div class="con">
          <img src="../../assets/images/logo.jpg" alt="" />
          <p>
            <span>手机号</span>
            <input type="text" v-model="user.phone" />
          </p>
          <p>
            <span>密&nbsp;&nbsp;&nbsp;码</span>
            <input type="text" v-model="user.password" />
            <!-- <i>获取验证码</i> -->
          </p>
          <p @click="fn()">登录</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import {login} from '../../utils/api'
import {Toast} from 'vant'
import {mapActions} from 'vuex'
export default {
    data() {
        return {
            user:{
                phone:'',
                password:''
            }
        }
    },
    methods: {
        ...mapActions({
            reqchangeuser:'reqchangeuser'
        }),
        fn(){
            if(this.user.phone!=''&&this.user.password!=''){
                login(this.user).then(res=>{
                if(res.data.code==200){
                    Toast.success(res.data.msg);
                    this.$router.push('/index')
                    // 将用户信息存储到状态层
                    this.reqchangeuser(res.data.list)
                }else{
                    Toast.fail(res.data.msg);
                }   
            })
            }else{
                Toast.fail('手机号密码不能为空')
            }
            
        }
    }
}
</script>

<style scoped src='../../assets/css/mobile_login.css'>
</style>